<template>
    <div class="large-completionRate">
        <div id="completionRateChart"></div>
    </div>
</template>

<script lang="ts">
import { echartLoad, toDecimalNoZero } from "@/utils";
import { Component, Vue, Prop } from "vue-property-decorator";
@Component({
    name: "home",
    components: {},
})
export default class extends Vue {
    @Prop({ default: () => {} }) pageData!: any;
    chart: any = null;
    myData: any[] = [];
    maxData = 0;
    maxRate=0
    mounted() {
        const myData: any[] = [];
        let max = 0;
        let maxRate=0
        for (let i = 0; i < 12; i++) {
            const achievementNum=this.pageData[i]?.achievementNum ||0
            const demandNum=this.pageData[i]?.demandNum ||0
            const rate=this.pageData[i]?.roundedRatio ||0
            if (achievementNum > max) max = achievementNum;
            if (demandNum > max) max = demandNum;
            if (rate > maxRate) maxRate = rate;
            myData.push(
                this.pageData[i]
                    ? this.pageData[i]
                    : {
                          achievementNum: 0,
                          demandNum: 0,
                          month: "-",
                          roundedRatio: 0,
                      }
            );
        }
        this.myData = myData;
        this.maxData = max;
        this.maxRate = maxRate;
        echartLoad(() => {
            this.setChart();
        });
    }
    setChart() {
        if (this.chart) {
            this.resetChart();
        } else {
            this.initChart();
        }
        // 启动定时器（每 2 秒切换一次）
        let timer = setInterval(this.autoHighlight, 3000);

        // 鼠标悬停时暂停自动切换
        this.chart.on("mouseover", () => clearInterval(timer));
        this.chart.on("mouseout", () => {
            timer = setInterval(this.autoHighlight, 3000);
        });
    }
    currentIndex = -1;
    timer = null;
    autoHighlight() {
        const dataLen = this.myData.length;
        // 取消之前的高亮
        this.chart.dispatchAction({
            type: "downplay",
            seriesIndex: 0,
            dataIndex: this.currentIndex,
        });
        // 计算下一个索引
        this.currentIndex = (this.currentIndex + 1) % dataLen;
        // 高亮当前数据项
        this.chart.dispatchAction({
            type: "highlight",
            seriesIndex: 0,
            dataIndex: this.currentIndex,
        });
        // 显示 Tooltip
        this.chart.dispatchAction({
            type: "showTip",
            seriesIndex: 0,
            dataIndex: this.currentIndex,
        });
    }
    resetChart() {
        const options = this.chart.getOption();
        options.series = this.getSeries();
        this.chart.setOption(options, true);
    }
    initChart() {
        const chartDom = document.getElementById("completionRateChart");
        // eslint-disable-next-line @typescript-eslint/no-this-alias
        const options: any = {
            grid: {
                top: 40,
                bottom: 50,
            },
            legend: {
                textStyle: {
                    color: "#fff",
                },
            },
            tooltip: {
                trigger: "axis",
            },
            xAxis: [
                {
                    type: "category",
                    data: this.myData.map((item) => item.month),
                    axisLine: {},
                    axisLabel: {
                        color: "#fff",
                        rotate: 30,
                    },
                    axisPointer: {
                        type: "shadow",
                    },
                },
            ],
            yAxis: [
                {
                    type: "value",
                    name: "",
                    min:0,
                    max:this.maxData+5,
                    interval:(this.maxData+5) /5,
                    axisLabel: {
                        formatter: "{value}",
                        color: "#fff",
                    },
                },
                {
                    type: "value",
                    name: "",
                    min:0,
                    max:this.maxRate+5,
                    interval:(this.maxRate+5) /5,
                    axisLabel: {
                        formatter: "{value}%",
                        color: "#fff",
                    },
                },
            ],
            series: this.getSeries(),
        };
        if (chartDom) {
            this.chart = window.echarts.init(chartDom as HTMLDivElement);
            this.chart.setOption(options);
        }
    }

    getSeries() {
        return [
            {
                name: "科技成果",
                type: "bar",
                color: "#27A6FF",
                tooltip: {
                    valueFormatter: function (value) {
                        return value;
                    },
                },
                data: this.myData.map((item) => item.achievementNum),
            },
            {
                name: "技术需求",
                type: "bar",
                color: "#F1516D",
                tooltip: {
                    valueFormatter: function (value) {
                        return value;
                    },
                },
                data: this.myData.map((item) => item.demandNum),
            },
            {
                name: "完成率",
                type: "line",
                smooth: true,
                yAxisIndex: 1,
                color: "#2F65F3",
                tooltip: {
                    valueFormatter: function (value) {
                        return value + "%";
                    },
                },
                data: this.myData.map((item) => item.roundedRatio),
            },
        ];
    }
}
</script>
<style lang="scss">
.large-completionRate {
    margin-top: 10px;
    height: 1vh;
    flex-grow: 1;
    #completionRateChart {
        width: 100%;
        height: 100%;
    }
}
</style>
